<template>
  <section class="latest wrapper">
    <ArticleCard
      :item="article"
      v-for="article in articles"
      :key="article.id"
    />
  </section>
</template>

<script>
import ArticleCard from "@/components/ArticleCard.vue";
import axios from "axios";
export default {
  name: "LatestPage",
  components: {
    ArticleCard,
  },
  data() {
    return {
      articles: [],
      currentPage: 1,
      pageSize: 10,
      sorter: "",
      token: "",
    };
  },
  created() {
    this.token = localStorage.getItem("token");
    if (!this.token) {
      this.$router.push("/login");
    }
    this.getArticles();
  },
  methods: {
    getArticles() {
      axios({
        method: "get",
        url: "http://interview-api-t.itheima.net/h5/interview/query",
        params: {
          current: this.currentPage,
          pageSize: this.pageSize,
          sorter: this.sorter,
        },
        headers: {
          Authorization: `Bearer ${this.token}`,
        },
      })
        .then((res) => {
          console.log(res);
          this.articles = res.data.data.rows;
        })
        .catch((err) => {
          console.log(err);
          if (err.status === 401) {
            this.$toast("身份信息失效");
            this.$router.push("/login");
          } else {
            this.$toast("获取文章失败");
          }
        });
    },
  },
  //页面失活
  deactivated() {
    console.log("页面失活");
  },
  //页面激活
  activated() {
    console.log("页面激活");
  },
};
</script>

<style lang="less" scoped>
.latest {
  display: flex;
  flex-direction: column;
  align-items: center;
  padding-top: (40/3.75vw);
}
</style>
